<template>
  <div
    class="-datav-wraper"
    style="
      width: 418px;
      height: 424px;
      pointer-events: auto;
      margin-top: 10px;
      margin-left: 10px;
      font-family: 'Microsoft Yahei';
      position: absolute;
      top: 50px;
      left: 0px;
    "
  >
    <div class="table-line" style="display: flex; height: 32px; margin-bottom: 10px">
      <div
        class="table-index"
        style="
          flex: 0 0 auto;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
          margin-right: 10px;
          width: 15px;
          height: 20px;
          border-radius: 0px;
          background: rgb(10, 115, 255);
        "
      >
        1
      </div>
      <div
        class="table-content"
        style="
          position: relative;
          white-space: nowrap;
          display: flex;
          align-items: center;
          background: rgba(55, 33, 82, 0);
          border-radius: 0px;
          width: 274px;
        "
      >
        <div
          class="content-bar"
          style="
            position: absolute;
            height: 20px;
            overflow: hidden;
            border-radius: 0px;
            width: 260px;
            background: linear-gradient(to right, rgb(10, 115, 255), rgb(0, 0, 0));
            top: 0px;
          "
        >
          <div
            class="content-light"
            style="
              position: absolute;
              height: 100%;
              border-right: 1px solid rgba(255, 255, 255, 0.24);
              width: 50%;
              background: linear-gradient(
                270deg,
                rgba(0, 0, 0, 0.13),
                rgba(255, 255, 255, 0)
              );
              top: 40px;
              left: 0px;
            "
          ></div>
        </div>
        <div
          class="content-text-wrap"
          style="
            margin: 0 1em;
            height: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
            width: 100%;
            position: relative;
          "
        >
          <div
            class="content-text"
            style="
              position: absolute;
              white-space: nowrap;
              display: flex;
              justify-content: center;
              font-size: 14px;
              top: 0px;
              color: rgba(255, 255, 255, 0.6);
            "
          >
            总产值:2000万元
          </div>
        </div>
      </div>
    </div>
    <div class="table-line" style="display: flex; height: 32px; margin-bottom: 10px">
      <div
        class="table-index"
        style="
          flex: 0 0 auto;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
          margin-right: 10px;
          width: 15px;
          height: 20px;
          border-radius: 0px;
          background: rgb(10, 115, 255);
        "
      >
        2
      </div>
      <div
        class="table-content"
        style="
          position: relative;
          white-space: nowrap;
          display: flex;
          align-items: center;
          background: rgba(55, 33, 82, 0);
          border-radius: 0px;
          width: 374px;
        "
      >
        <div
          class="content-bar"
          style="
            position: absolute;
            height: 20px;
            overflow: hidden;
            border-radius: 0px;
            width: 150px;
            top: 0px;
            background: linear-gradient(to right, rgb(10, 115, 255), rgb(0, 0, 0));
          "
        >
          <div
            class="content-light"
            style="
              position: absolute;
              height: 100%;
              border-right: 1px solid rgba(3, 0, 209, 0)              width: 50%;
              background: linear-gradient(
                270deg,
                rgba(0, 0, 0, 0.13),
                rgba(255, 255, 255, 0)
              );
            "
          ></div>
        </div>
        <div
          class="content-text-wrap"
          style="
            margin: 0 1em;
            height: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
            width: 100%;
            position: relative;
          "
        >
          <div
            class="content-text"
            style="
              position: absolute;
              white-space: nowrap;
              display: flex;
              justify-content: center;
              font-size: 14px;
              color: rgba(255, 255, 255, 0.6);
              top: 0px;
            "
          >
            种植业产值:850万元
          </div>
        </div>
      </div>
    </div>
    <div class="table-line" style="display: flex; height: 32px; margin-bottom: 10px">
      <div
        class="table-index"
        style="
          flex: 0 0 auto;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
          margin-right: 10px;
          width: 15px;
          height: 20px;
          border-radius: 0px;
          background: rgb(10, 115, 255);
        "
      >
        3
      </div>
      <div
        class="table-content"
        style="
          position: relative;
          white-space: nowrap;
          display: flex;
          align-items: center;
          background: rgba(55, 33, 82, 0);
          border-radius: 0px;
          width: 374px;
        "
      >
        <div
          class="content-bar"
          style="
            position: absolute;
            height: 20px;
            overflow: hidden;
            border-radius: 0px;
            width: 120px;
            top: 0px;
            background: linear-gradient(90deg, rgb(10, 115, 255), rgb(0, 0, 0));
          "
        >
          <div
            class="content-light"
            style="
              position: absolute;
              height: 100%;
              border-right: 1px solid rgba(3, 37, 255, 0)4);
              width: 50%;
              background: linear-gradient(
                270deg,
                rgba(0, 0, 0, 0.13),
                rgba(255, 255, 255, 0)
              );
            "
          ></div>
        </div>
        <div
          class="content-text-wrap"
          style="
            margin: 0 1em;
            height: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
            width: 100%;
            position: relative;
          "
        >
          <div
            class="content-text"
            style="
              position: absolute;
              white-space: nowrap;
              display: flex;
              justify-content: center;
              font-size: 14px;
              top: 0px;
              color: rgba(255, 255, 255, 0.6);
            "
          >
            餐饮业产值:700万元
          </div>
        </div>
      </div>
    </div>
    <div class="table-line" style="display: flex; height: 32px; margin-bottom: 10px">
      <div
        class="table-index"
        style="
          flex: 0 0 auto;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
          margin-right: 10px;
          width: 15px;
          height: 20px;
          border-radius: 0px;
          background: rgb(10, 115, 255);
        "
      >
        4
      </div>
      <div
        class="table-content"
        style="
          position: relative;
          white-space: nowrap;
          display: flex;
          align-items: center;
          background: rgba(55, 33, 82, 0);
          border-radius: 0px;
          width: 374px;
        "
      >
        <div
          class="content-bar"
          style="
            position: absolute;
            height: 20px;
            overflow: hidden;
            border-radius: 0px;
            width: 90px;
            top: 0px;
            background: linear-gradient(90deg, rgb(10, 115, 255), rgb(0, 0, 0));
          "
        >
          <div
            class="content-light"
            style="
              position: absolute;
              height: 100%;
              border-right: 1px solid rgba(0, 28, 113, 0).24)              width: 50%;
              background: linear-gradient(
                270deg,
                rgba(0, 0, 0, 0.13),
                rgba(255, 255, 255, 0)
              );
            "
          ></div>
        </div>
        <div
          class="content-text-wrap"
          style="
            margin: 0 1em;
            height: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
            width: 100%;
            position: relative;
          "
        >
          <div
            class="content-text"
            style="
              position: absolute;
              white-space: nowrap;
              display: flex;
              justify-content: center;
              font-size: 14px;
              top: 0px;
              color: rgba(255, 255, 255, 0.6);
            "
          >
            养殖业产值:280万元
          </div>
        </div>
      </div>
    </div>
    <div class="table-line" style="display: flex; height: 32px; margin-bottom: 10px">
      <div
        class="table-index"
        style="
          flex: 0 0 auto;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
          margin-right: 10px;
          width: 15px;
          height: 20px;
          border-radius: 0px;
          background: rgb(10, 115, 255);
        "
      >
        5
      </div>
      <div
        class="table-content"
        style="
          position: relative;
          white-space: nowrap;
          display: flex;
          align-items: center;
          background: rgba(55, 33, 82, 0);
          border-radius: 0px;
          width: 374px;
        "
      >
        <div
          class="content-bar"
          style="
            position: absolute;
            height: 20px;
            overflow: hidden;
            border-radius: 0px;
            width: 70px;
            top: 0px;
            background: linear-gradient(90deg, rgb(10, 115, 255), rgb(0, 0, 0));
          "
        >
          <div
            class="content-light"
            style="
              position: absolute;
              height: 100%;
              border-right: 1px solid rgba(255, 0, 0, 0.24)              width: 50%;
              background: linear-gradient(
                270deg,
                rgba(0, 0, 0, 0.13),
                rgba(255, 255, 255, 0)
              );
            "
          ></div>
        </div>
        <div
          class="content-text-wrap"
          style="
            margin: 0 1em;
            height: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
            width: 100%;
            position: relative;
          "
        >
          <div
            class="content-text"
            style="
              position: absolute;
              white-space: nowrap;
              display: flex;
              justify-content: center;
              font-size: 14px;
              top: 0px;
              color: rgba(255, 255, 255, 0.6);
            "
          >
            文旅业产值:170万元
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>

<style>
/* @keyframes content {
  from {
    transform: translate3(0px, 0px, 0px);
  }

  to {
    transform: translate3D(-100%, 0, 0);
  }
}
.content-light {
  animation-name: content;
  animation-duration: 1s;
} */
</style>
